<!-- 评论组件 -->
<template>
	<div id="tmp1">
		<!--1.0实现提交评论数据到服务器的静态结构 -->
		<div id="postcomment">
			<h3>提交评论</h3>
			<p class="line"></p>
			<textarea placeholder="请输入您要评论的内容" v-model="postcontent"></textarea>
			<mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
		</div>
		<!-- 2.0获取评论数据列表 -->
		<div id="list">
			<h3>评论列表</h3>
			<p class="line"></p>

			<div v-for='(item,index) in list'>
				<div class="title">
					<span>第{{index+1}}楼</span>
					<span>用户：{{item.user_name}}</span>
					<span>发表时间：{{item.add_time | datafmt('YYYY-MM-DD HH-mm-ss')}}</span>
				</div>
				<ul class="mui-table-view">
					 <li class="mui-table-view-cell" v-text='item.content'></li>
				</ul>
			</div>
		</div>
		<!-- 更多按钮 -->
		<mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
	</div>
</template>

<script>
import { Toast } from 'mint-ui';
import common from '../../kits/common.js'
	export default{
		data(){
			return{
				pageindex:1,  //代表获取第几页的评论数据
				postcontent:'',//用来获取用户填写的数据
				list:[]  //评论数据的数组
			}
		},
		props:['id'],//作用是用来接收父组件传入过来的ID值
		created(){
			this.getcommentlist(this.pageindex);
		},
		methods:{
			// 3.0实现加载更多的方法
			getmore(){
				this.pageindex++;
				this.getcommentlist(this.pageindex);
			},
			//2.0获取当前数据的评论数据pageindex代表的是当前获取的是哪一页面的数据，默认为一
			getcommentlist(pageindex){
				pageindex = pageindex || 1;
				var url = common.apidomain + '/api/getcomments/'+this.id+'?pageindex='+pageindex;
				// 2.0发出ajax请求数据获取数据
				this.$http.get(url).then(function(res){
					if(res.body.status != 0){
						Toast(res.body.message);
						return;
					}
					this.list = this.list.concat(res.body.message);
				})
			},


			postcomment(){
				if(this.postcontent.trim().length<=0){
					Toast('您要评论的内容不能为空');
					return;
				}

				// 1.0首先确定提交的地址
				var url = common.apidomain + '/api/postcomment/'+this.id;
				// 2.0利用ajax的post请求讲数据提交到指定的地址
				// 2.0.1获取到用户在文本框中填写的评论内容，通过content：内容个是提交到请求报文中
				this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
						Toast(res.body.message);
						
						//4.0 将最新的评论数据追加到评论列表的最顶部
						this.list = [{
							"user_name":"匿名用户",
							"add_time":new Date(),
							"content":this.postcontent
						}].concat(this.list);
						// 3.0将文本框中的评论清空
						this.postcontent = '';
				})

			}
		}
	}
</script>

<style scoped>
	/*实现提交评论样式*/
	#postcomment{
		padding:5px;
		text-align: left;
	}
	.line{
		height: 1px;
		width:100%;
		border-bottom: 1px solid #ddd;
	}
	/*评论列表的样式*/
	.list{
		padding:5px;
	}
	h3,.mui-table-view{
		text-align: left;
	}
	.title{
		color: #6d6d72;
		font-size: 15px;
		background-color:#ddd;
		padding:5px;
		text-align: left;
	}
</style>